<template>
    <div class="detail_module_panel">
            <el-table :data="data" style="width: 100%">
                <el-table-column align="left" :label="$t('common.serialNumber')" type="index" width="80"></el-table-column>
                <el-table-column align="left" prop="orderId" min-width="200" :label="$t('common.innerOrderId')"><!--内部订单号--></el-table-column>
                <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                <el-table-column align="left" prop="contractAmount" :label="$t('common.borrowAmount')" min-width="180"><!--借款金额-->
                    <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency('.') }}</template>
                </el-table-column>
                <el-table-column align="left" prop="loanPeriod" :label="$t('common.borrowingCycle')" min-width="180"><!--借款期限--></el-table-column>
                <el-table-column align="left" prop="applyTime" min-width="180" :label="$t('common.applyDate')"><!--申请时间-->
                    <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column align="left" prop="repayStatus" :label="$t('common.orderStatus')" min-width="200"><!--订单状态-->
                    <template slot-scope="{ row }"><span v-if="!row.repayStatus && row.repayStatus !== 0">{{ $t('common.notOverdue') }}</span><span v-if="row.repayStatus === 0 || row.repayStatus === 2 || row.repayStatus === 3">{{ row.repayStatus | repayStatusSwitch }}</span><span v-if="row.repayStatus === 1">{{ $t('authority.overdueXDays',{x: row.lateDays}) }}</span></template>
                </el-table-column>
                <el-table-column align="left" prop="status" :label="$t('collection.colRecord')" min-width="180"><!--催收记录-->
                    <template slot-scope="{ row }"><el-button type="text" @click="checkHandler(row.orderId)">{{ $t('common.check') }}</el-button></template>
                </el-table-column>
            </el-table>
    </div>
</template>

<script>
    import {apiConf} from '@/config';

    let that = null;
    export default {
        name: 'loanHistory',
        props: {
            data: {
                type: Array
            }
        },
        components: {
        },
        data() {
            return {
            };
        },
        methods: {
            checkHandler(overdueInfoId) {
                this.$emit('showRecord',overdueInfoId);
            }
        },
        filters: {
            // 还款状态
            repayStatusSwitch(repayStatus) {
                switch (repayStatus + '') {
                    case '1':
                        return that.$t('common.overdueNotRepay');// 逾期未还款
                    case '2':
                        return that.$t('common.overdueHasRepay');// 逾期已还款
                    case '3':
                        return that.$t('common.notOverdueHasRepay');// 未逾期已还款
                    case '0':
                        return that.$t('common.notOverdueNotRepay');// 未逾期未还款
                    default:
                        return '';
                }
            },
        },
        mounted() {
            that = this;
        }
    };
</script>

<style lang="scss" scoped>
    .detail_module_panel {
        max-height: 500px;
        overflow:scroll;
        position: relative;
    }
    .detail_module_panel_wrap {
        max-height: 500px;
        overflow-y: scroll;
    }
</style>
